<template>

  <div id="employee-main-container" class="clock-index">
    <wk-page-header
      title="在岗职工人均工资"
      :dropdowns="headerMoreHandle"
      @command="headerMoreHandleClick" />

<!--    <wk-filter-header>-->
<!--      <template slot="right">-->
<!--        <el-button v-if="hasFilterContent" type="text" @click="resetFilter">清除筛选</el-button>-->
<!--        <wk-popover-filter-->
<!--          ref="popoverFilter"-->
<!--          class="margin-left-interval"-->
<!--          :width="popoverFilterWidth"-->
<!--          :field-from.sync="filterObj"-->
<!--          :field-list="filterList"-->
<!--          :has-content="hasFilterContent"-->
<!--          placement="bottom"-->
<!--          @sure="refreshList"-->
<!--          @reset="resetFilter">-->

<!--        </wk-popover-filter>-->
<!--      </template>-->
<!--    </wk-filter-header>-->

    <div class="wrapper-main" :style="{height: scrollerHeight}" style="overflow: scroll;margin-top: 20px">
      <table>
        <thead>
        <tr>
          <td class="head" style="text-align: center" rowspan="2">单位</td>
          <td class="head" style="text-align: center" colspan="4">工资总额</td>
          <td class="head" style="text-align: center" colspan="4">在岗职工年平均人数</td>
          <td class="head" style="text-align: center" rowspan="2">在岗职工年平均工资</td>
          <td class="head" style="text-align: center" rowspan="2">中层管理人员年平均工资</td>
          <td class="head" style="text-align: center" rowspan="2">普通员工年平均工资</td>
          <td class="head" style="text-align: center" rowspan="2">备注</td>
        </tr>
        <tr>
          <td class="head" style="text-align: center;font-weight: bolder" >合计</td>
          <td class="head" style="text-align: center">高管人员工资总额</td>
          <td class="head" style="text-align: center">中层人员工资总额</td>
          <td class="head" style="text-align: center">普通员工工资总额</td>

          <td class="head" style="text-align: center;font-weight: bolder" >合计</td>
          <td class="head" style="text-align: center">高管人数</td>
          <td class="head" style="text-align: center">中层管理人数</td>
          <td class="head" style="text-align: center">普通员工人数</td>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(field, fIndex) in data" :key="fIndex">
          <td>{{field.deptName}}</td>
          <td style="text-align: center">{{field.totalIncome}}</td>
          <td style="text-align: center">{{field.highIncome}}</td>
          <td style="text-align: center">{{field.middleIncome}}</td>
          <td style="text-align: center">{{field.normalIncome}}</td>

          <td style="text-align: center">{{field.totalNum}}</td>
          <td style="text-align: center">{{field.highNum}}</td>
          <td style="text-align: center">{{field.middleNum}}</td>
          <td style="text-align: center">{{field.normalNum}}</td>

          <td style="text-align: center">{{field.employeePerIncome}}</td>
          <td style="text-align: center">{{field.middlePerIncome}}</td>
          <td style="text-align: center">{{field.normalPerIncome}}</td>
          <td style="text-align: center">{{field.remark}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {
    hrmDeptQueryTreeListAPI
  } from '@/api/hrm/salaryForm'
  import {
    hrmEmployeePerIncomeAPI,
    hrmPerCapitaSalaryExportAPI
  } from '@/api/hrm/worker'

  import WkPageHeader from '@/components/Page/WkPageHeader'
  import WkFilterHeader from '@/components/NewCom/ReportForms'
  import WkPopoverFilter from '@/components/NewCom/WkPopoverFilter'

  import { mapGetters } from 'vuex'

  import { downloadExcelWithResData } from '@/utils'

  export default {

    components: {
      WkPageHeader,
      WkFilterHeader,
      WkPopoverFilter,
    },
    data() {
      return {
        // 筛选宽
        popoverFilterWidth: 150,
        // 高级筛选
        filterObj: {}, // 筛选确定数据
        showDview: false,
        list: [], // 列表
        data: []
      }
    },
    computed: {
      ...mapGetters([
        'collapse',
        'hrm'
      ]),

      scrollerHeight: function() {
        return (window.innerHeight - 150) + 'px'; //自定义高度需求
      },

      // 考勤所有权限
      attendanceAuth() {
        return this.hrm && this.hrm.attendance
      },

      // 导出请假记录权限
      exportLeaveRecordAuth() {
        return this.attendanceAuth && this.attendanceAuth.exportLeaveRecord
      },

      /**
       * 头部更多操作
       */
      headerMoreHandle() {
        const temps = []
        if (this.exportLeaveRecordAuth) {
          temps.push({ command: 'export', name: '导出', icon: 'wk wk-export' })
        }
        return temps
      },

      // 有筛选内容
      hasFilterContent() {
        if (this.filterObj) {
          let hasContent = false
          const keys = Object.keys(this.filterObj)
          for (let index = 0; index < keys.length; index++) {
            const key = keys[index]
            if (this.filterObj[key] != '' &&
              this.filterObj[key] != [] &&
              this.filterObj[key] != null &&
              this.filterObj[key] != undefined) {
              hasContent = true
            }
          }
          return hasContent
        }
        return false
      },

      filterList() {
        return [{
          name: '部门',
          field: 'deptIds',
          formType: 'structure',
          radio: false,
          props: {
            dataType: 'hrm'
          },
          request: hrmDeptQueryTreeListAPI,
          setting: []
        }]
      }
    },
    watch: {
      collapse: {
        handler(val) {
          this.popoverFilterWidth = document.documentElement.clientWidth - (val ? 89 : 225)
        },
        immediate: true
      }
    },
    created() {
      window.onresize = () => {
        this.tableHeight = document.documentElement.clientHeight - 190
      }

      hrmEmployeePerIncomeAPI(this.params).then(res => {
        this.data=res.data;
      })
    },
    methods: {

      /**
       * 高级筛选
       */
      resetFilter() {
        this.filterObj = {}
        this.refreshList()
      },
      /**
       * 搜索
       */
      filterHeaderHandle(type, data) {
        if (type === 'search') {
          this.search = data
          this.refreshList()
        }
      },

      /**
       * 刷新
       */
      refreshList() {
        this.handleCurrentChange(1)
      },

      /**
       * 头部更多操作
       */
      headerMoreHandleClick(command) {
        if (command == 'export') {
          this.loading = true

          hrmPerCapitaSalaryExportAPI(this.params).then(res => {
            downloadExcelWithResData(res)
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clock-index {
    .wk-filter-header {
      margin-top: 30px;
      margin-bottom: 20px;
      line-height: 32px;
    }

    .d-view {
      position: fixed;
      top: 60px;
      right: 0;
      bottom: 0;
      width: 75%;
      min-width: 926px;
    }

    .el-date-editor.el-input {
      width: 130px;
    }

    .wrapper-main{
      //表格行交替色实现
      overflow: hidden;
      table{
        border-spacing: 0;
        width: 100%;
        thead{
          tr{
            &:nth-child(2n+1){
              background-color: #FAFAFA;
            }
          }
        }
        //表格行通用设置
        tr{
          height: 40px;
          font-size: 14px;
          color: #666666;
          line-height: 14px;
          font-weight: 400;
          &:nth-child(2n){
            background-color: #fafafa;
          }
        }
        //表头样式设置
        .head{
          font-size: 14px;
          color: #666666;
          line-height: 14px;
          font-weight: 600;
        }
        td{border:1px solid darkgray;text-align: center}
      }
    }
  }
</style>
